<template>
  <div>
    <tableItem :tableData='tableData' :biaotou='biaotou' @rowClick="onDeleteRow" @handleEdited="addOrEdit">
      <template #button>
        <el-input placeholder="" v-model="serach" size="small" style="width: 100px;" clearable>
        </el-input><el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
        <el-button type="primary" icon="el-icon-folder-add" size="small" @click="addOrEdit('add')">新增</el-button>
      </template>

      <template #image>
        <el-table-column label="头像" prop="headerImg" width="150px"> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></el-table-column>
      </template>

      <template #switch>
        <el-table-column label="是否启用" prop="status" width="80px"><el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch></el-table-column>
      </template>
    </tableItem>

    <!-- 修改diglog对话框 -->
    <diglog ref="digloged" @confirmed="onConfirmed" :title="title" :form="form"></diglog>

  </div>
</template>

<script>
import tableItem from '@/components/table/index.vue'
import diglog from '@/components/diglog/index.vue'
import { getUserList, addUser, deleteUser, EditUser } from '@/api/user'
export default {
  components: { tableItem, diglog },
  props: {},
  data() {
    return {
      tableData: [],
      biaotou: [
        {
          prop: '_id',
          label: '编号',
          width: 200,
          fixed: true
        },
        {
          prop: 'username',
          label: '姓名',
          width: 120
        },
        {
          prop: 'password',
          label: '密码',
          width: 120
        },
        {
          prop: 'age',
          label: '年龄',
          width: 120
        },
        {
          prop: 'cellphone',
          label: '联系方式',
          width: 200
        },

        {
          prop: 'gender',
          label: '性别',
          width: 120
        },
        // {
        //   prop: 'headerImg',
        //   label: '头像',
        //   width: 120
        // },
        {
          prop: 'createTime',
          label: '日期',
          width: 200,
          fixed: true
        }
      ],
      serach: '',
      value: true,
      dialogFormVisible: false,
      title: '',
      form: {}
    }
  },
  created() {},
  mounted() {
    this.onGetUserList()
  },
  methods: {
    async onGetUserList() {
      const res = await getUserList()
      this.tableData = res.data
    },

    addOrEdit(row) {
      this.$refs.digloged.open()

      if (row === 'add') {
        this.form = {}
        this.title = '新增'
      } else {
        this.form = { ...row }

        this.title = '编辑'
      }
    },

    onConfirmed(row) {
      this.form = { ...row }
      if (this.title == '新增') {
        this.onSubmit()
      } else {
        console.log('编辑')
        this.onEdit(row)
      }
    },
    async onEdit(row) {
      const res = await EditUser(row)
      if (res.code === 200) {
        this.$message.success('编辑成功')
        this.dialogFormVisible = false
        this.onGetUserList()
      }
    },

    async onSubmit() {
      const res = await addUser(this.form)
      if (res.code === 200) {
        this.$message.success('添加成功')
        this.dialogFormVisible = false
        this.onGetUserList()
      }
    },

    async onDeleteRow(row) {
      const res = await deleteUser(row._id)
      if (res.code === 200) {
        this.$message.success('删除成功')
        this.onGetUserList()
      }
    }
  },
  watch: {},
  computed: {}
}
</script>

<style lang="less" scoped>
</style>
